<template>
  <div style="position: relative;" class="up">
    <input style="opacity: 0;outline: 0;position: absolute;z-index: -1;"/>
    <template v-if="!multiple">
      <el-input v-model="image" style="max-width: 600px">
        <el-button slot="append" @click="onSelect">{{ type === 'image' ? '选择图片' : '选择文件' }}</el-button>
      </el-input>
    </template>

    <div class="images" v-if="type === 'image'">
      <v-draggable v-model="preview" style="display: inline-block">
        <div class="box thumb" v-for="(img, idx) in preview"
             :key="img"
             :style="{ width: imgWidth ? imgWidth + 'px' : '' }">
          <img class="thumb" :src="img"/>

          <div class="box-delete">
            <i class="el-icon-delete" title="删除" @click="onRemoveFile(idx)"/>
          </div>
        </div>
      </v-draggable>

      <div class="box" v-if="!multiple && preview.length === 0">
        <i class="el-icon-picture-outline"/>
      </div>

      <div class="box cov" v-if="multiple" @click="show = true">
        <i class="el-icon-upload2"/>
      </div>

<!--      <div class="ke__tip" v-show="multiple">-->
<!--        点击图片拖动可以调整顺序-->
<!--      </div>-->
    </div>
    <div class="file" v-else-if="type === 'file'">
      <input type="file" ref="file" @change="onChangeFile"/>
      {{ file ? file.name : '' }}
    </div>

    <k-dialog-upload v-model="show" @success="onUpload" :multiple="multiple"/>
  </div>
</template>

<script>
import KDialogUpload from '../dialog-upload/index'
export default {
  name: 'KSimpleUpload',
  components: { KDialogUpload },
  props: {
    value: {},
    multiple: Boolean,
    type: {
      type: String,
      default: 'image'
    },
    imgWidth: Number
  },
  data () {
    return {
      show: false,
      file: null
    }
  },
  computed: {
    image: {
      get () {
        return this.value
      },
      set (src) {
        this.$emit('input', src)
      }
    },
    preview: {
      get () {
        if (!this.value) {
          return []
        }
        if (typeof this.value === 'string') {
          return [this.value]
        } else {
          return this.value
        }
      },
      set (data) {
        if (this.multiple) {
          this.$emit('input', data)
        } else {
          this.$emit('input', data[0])
        }
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
    })
  },
  methods: {
    // 选择文件 / 图片
    onSelect () {
      if (this.type === 'image') {
        this.show = true
      } else {
        this.$refs['file'].click()
      }
    },
    onUpload (files) {
      if (this.multiple) {
        this.$emit('input', files.map(file => {
          return file.url
        }))
      } else {
        this.$emit('input', files[0].url)
      }
      this.$emit('change', files[0].url)
    },
    // 删除文件
    onRemoveFile (idx) {
      if (this.multiple) {
        this.value.splice(idx, 1)
      } else {
        this.$emit('input', '')
      }
    },
    // 选择文件
    onChangeFile (evt) {
      this.file = evt.target.files[0]
    }
  }
}
</script>

<style scoped lang="scss">
  .up {
    display: inline-block;
    width: 100%;
  }
  .images {
    color: #999;
    .box {
      vertical-align: top;
      display: inline-flex;
      width: 110px;
      height: 110px;
      line-height: 110px;
      text-align: center;
      align-items: center;
      border: solid 1px #eee;
      margin: 5px;
      position: relative;
      overflow: hidden;
      background-color: #fff;
      .thumb {
        width: 100%;
        height: 100%;
      }
      &:hover {
        .box-delete {
          transform: translateY(40px);
        }
      }
    }
    .box-delete {
      position: absolute;
      left: 0;
      top: -40px;
      width: 100%;
      padding: 5px 10px;
      box-sizing: border-box;
      background: rgba(0,0,0,0.65);
      display: flex;
      align-items: center;
      transition: all .4s;
      i {
        flex: 1;
        color: #fff;
        font-size: 16px;
        text-align: right;
        cursor: pointer;
        &:hover {
          color: #7bff53;
        }
      }
    }
    .box.cov {
      cursor: pointer;
    }
    i {
      flex: 1;
      font-size: 40px;
    }
  }
  .file {
    input[type="file"] {
      opacity: 0;
      position: absolute;
      left: 0;
      z-index: -1;
    }
  }
</style>
